<template>
  <el-sub-menu :index="item.path" v-if="item.children">
    <template #title>
      <i v-if="item.meta.iconName" :class="item.meta.iconName"></i>
      <span>{{ item.meta.linkName }}</span>
    </template>
    <Menu
      :item="_item"
      v-for="(_item, _index) in item.children"
      :key="_index"
    ></Menu>
  </el-sub-menu>
  <el-menu-item :index="item.path" v-else :route="{ path: item.path }">
    <i v-if="item.meta.iconName" :class="item.meta.iconName"></i>
    <span>{{ item.meta.linkName }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: "Menu",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style></style>
